<template>
	<view id="box">
		<view class="top">
			<view class="user">
				<u-avatar size="50"></u-avatar>
				<view class="name">
					{{userInfo.name}}
					<view class="eid">
						{{userInfo.employee_id}}
					</view>
				</view>
				
			</view>
			<button class="total" @click="gomessage">
				健康信息
			</button>
		</view>
		<form class="center">
			<view class="test">
				当前体温（°C）
			</view>
			<input type="text" class="tw" placeholder="请输入体温" v-model="tiwen">
			<button type="submit" class="push" @click="addtem">健康打卡</button>
		</form>
		<view class="bottom">
			<view class="history">
				<view class="his">
					打卡记录
				</view>
			</view>
			<view class="box" v-for="item in temperatureList" :key="'s'+index" v-show="temperatureList.length>0">
				<view class="jilu">
					
				</view>
				<view class="time">
					{{item.temtime}}
				</view>
				<view class="temperature">
					{{item.temperature}}°C
				</view>
			</view>
		</view>
	</view>
</template> 

<script>
	import { v4 as uuidv4 } from 'uuid'
	import { mapState } from 'vuex';
	import { posttemrecord,postteminfo } from "@/api/api.js"
	export default {
		data() {
			return {
				show : false,
				// 体温数组
				temperatureList:[],
				tiwen:''
			}
		},
		onLoad() {
		},
		computed: {
			...mapState(['loginState', 'userInfo'])
		},
		methods: {
			// 点击跳转去健康信息页面
			gomessage(){
				wx.navigateTo({
				  url: '/pages/health/message'
				})
			},
			// 点击按钮添加数组
		
			addtem(){ 
				if(this.userInfo.name == '未知用户'){
					uni.showModal({
						title: '请先登录',
						showCancel: false
					});
				}else{
					if( '30' < this.tiwen && this.tiwen < '45'){
						const id = uuidv4();
						postteminfo({
							id: id,
							employee_id: this.userInfo.employee_id,
							employee_name: this.userInfo.name,
							temtime: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate() + ' ' + new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds(),
							temperature: this.tiwen,
						}),
						uni.showToast({
							title: '打卡成功',
							icon: 'none'
						})
						this.tiwen = ''
					}else{
						uni.showModal({
							title: '请输入合理数据',
							showCancel: false
						});
						this.tiwen = ''
					}	
				}
			},
			// 发送网络请求打卡记录
			handleHealth(){
				posttemrecord(this.userInfo.employee_id)
					.then(response => {
						// console.log(response);
						if (response.length>0) {
							this.temperatureList = response;
							console.log(this.temperatureList);
						} 
					})
					.catch(error => {
						console.log(error);
					});
			}
		},
		mounted() {
			this.handleHealth();
		},
	}
</script>

<style lang="scss" scoped>
	#box{
		.top{
			width: 100%;
			height: 400rpx;
			background-color: #007edc;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.user{
				display: flex;
				padding-left: 80rpx;
				padding-top: 50rpx;
				.name{
					font-size: 50rpx;
					margin-left: 20rpx;
					.eid{
						font-size: 30rpx;
					}
				}
				
			}
			.total{
				width: 225rpx;
				height: 60rpx;
				font-size: 42rpx;
				text-align: center;
				line-height: 60rpx;
				margin-right: 20rpx;
				margin-top: 57rpx;
				background-color: #49e6de;
				border-radius: 27rpx
			}
		}
		.center{
			width: 90%;
			height: 300rpx;
			background-color: #fff;
			margin: 0 5%;
			z-index: 100000;
			position: absolute;
			top: 300rpx;
			display: flex;
			flex-direction: column;
			border-radius: 20rpx;
			.test{
				font-size: 40rpx;
				margin-left: 20rpx;
				margin-bottom: 30rpx;
			}
			.tw{
				border-bottom: 1px solid gray;
				width: 90%;
				margin: 0 auto;
				margin-bottom: 20rpx;
			}
			.push{
				width: 90%;
				margin-top: 40rpx;
				background-color: #007edc;
			}
		}
		.bottom{
			width:90% ;
			margin: 0 auto;
			margin-top: 228rpx;
			.history{
				display: flex;
				justify-content: space-between;
				border-bottom: 1px solid gray;
				.his{
					font-size: 40rpx;
					margin-bottom: 20upx;
				}
			}
			.box{
				display: flex;
				justify-content: space-between;
				padding: 20upx 0;
				border-bottom: 1px dashed darkgray;
				.jilu{
					width: 25upx;
					height: 25upx;
					background-color: green;
					border-radius: 50%;
					margin: 10upx 10upx;
				}
			}
		}
	}
	
</style>